<?php ob_start('ob_gzhandler') ?>
<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!--
        /**
        * o------------------------------------------------------------------------------o
        * | This file is part of the RGraph package - you can learn more at:             |
        * |                                                                              |
        * |                          http://www.rgraph.net                               |
        * |                                                                              |
        * | This package is licensed under the RGraph license. For all kinds of business |
        * | purposes there is a small one-time licensing fee to pay and for non          |
        * | commercial  purposes it is free to use. You can read the full license here:  |
        * |                                                                              |
        * |                      http://www.rgraph.net/LICENSE.txt                       |
        * o------------------------------------------------------------------------------o
        */
    -->
    <title>RGraph: HTML5 canvas graph library - combining bar and line graphs</title>
    
    <meta name="keywords" content="rgraph html5 canvas graph docs combining" />
    <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about combining charts" />

    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
    <link rel="icon" type="image/png" href="../images/favicon.png">

    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.context.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="../libraries/RGraph.pie.js" ></script>
    <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
    
    <style>
        div.RGraph_tooltip div {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 5px;
        }

        div.RGraph_tooltip div#green {
            background-color: green;
        }

        div.RGraph_tooltip div#red {
            background-color: red;
        }

        div.RGraph_tooltip div#gray {
            background-color: #ccc;
        }
    </style>


    <script>
        function enlarge_tooltip_graph (e, title)
        {
            var bg = document.createElement('DIV');
                bg.style.opacity = 0;
                bg.style.position = 'fixed';
                bg.style.left = 0;
                bg.style.top = 0;
                bg.style.width = '2000px';
                bg.style.height = '2000px';
                bg.style.backgroundColor = 'rgba(0,0,0,0.2)';
                bg.style.zIndex = 32568;
                bg.style.textAlign = 'center';
            document.body.appendChild(bg);
            
            var div = document.createElement('DIV');
                div.style.position = 'relative';
                div.style.backgroundColor = 'white';
                div.style.top = '200px';
                div.style.width = '300px'
                div.style.height = '240px';
                div.style.padding = '15px';
                div.style.WebkitBorderRadius = '5px';
                div.style.MozBorderRadius = '5px';
                div.style.borderRadius = '5px';
                div.style.left = ((document.body.clientWidth / 2) - 175) + 'px';
                
                // Add standard box-shadow and -moz-box-shadow                
                div.style.WebkitBoxShadow = 'gray 0 0 25px';
                div.style.MozBoxShadow = '0 0 25px gray';
                div.style.boxShadow = '0 0 25px gray';

                div.style.border = '1px black solid';

            bg.appendChild(div);

            var canvas = document.createElement('CANVAS');
                canvas.width  = 300;
                canvas.height = 240;
                canvas.id     = 'big_pie';
            div.appendChild(canvas);
            
            bg.onmousedown = function (e)
            {
                this.style.display = 'none';
                document.body.removeChild(this);
                
                e.stopPropagation();
            }
            
            div.onmousedown = function (e)
            {
                e.stopPropagation();
            }
            
            var data = e.target.__object__.data;
            
            var pie = new RGraph.Pie('big_pie', data);
            pie.Set('chart.strokestyle', 'white');
            pie.Set('chart.linewidth', 5);
            pie.Set('chart.title', title + ' statistics');
            pie.Set('chart.align', 'left');
            pie.Set('chart.colors', ['red','green','#ccc']);
            pie.Set('chart.key', ['Jane', 'Fred', 'John']);
            pie.Set('chart.key.shadow', true);
            pie.Set('chart.key.shadow.blur', 15);
            pie.Set('chart.key.shadow.offsetx', 0);
            pie.Set('chart.key.shadow.offsety', 0);
            pie.Set('chart.key.shadow.color', 'gray');
            pie.Set('chart.key.rounded', true);
            pie.Draw();

            
            setTimeout(function () {bg.style.opacity = 0.2;}, 50);
            setTimeout(function () {bg.style.opacity = 0.4;}, 100);
            setTimeout(function () {bg.style.opacity = 0.6;}, 150);
            setTimeout(function () {bg.style.opacity = 0.8;}, 200);
            setTimeout(function () {bg.style.opacity = 1;}, 250);
            
        }
    </script>

</head>
<body>

    <!-- Social networking buttons -->
    <script src="../libraries/RGraph.common.core.js" ></script>
    
    <script>
        function HideTwitterDIV ()
        {
            document.getElementById("twitter_div").style.opacity = 0;
            document.getElementById("twitter_div").style.display = 'none';
        }


        function ShowTwitterDIV (e)
        {
            var e   = RGraph.FixEventObject(document.all ? event : e);
            var div = document.getElementById("twitter_div");
            var img = document.getElementById("twitter_icon");

            div.style.display = 'block';
            div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
            div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';

            /**
            * Fade it in
            */
            setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
            setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
            setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
            setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
            setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);

            e.stopPropagation();

            return false;
        }

        /**
        * This code installs the event handler that hides the Twitter DIV
        */
        if (RGraph.isIE8()) {
             window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
        } else {
            window.addEventListener('click', HideTwitterDIV, false);
        }
    </script>

    <!-- The twitter DIV --> 
    <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;"> 
        <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
        <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a> 
    </div>

    <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
        <script>
            // Opera fix
            if (navigator.userAgent.indexOf('Opera') == -1) {
              document.getElementById("social_icons").style.position = 'fixed';
              document.getElementById("twitter_div").style.position = 'fixed';
    
            }
        </script>
    
        <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
    
    
            <div id="social">
                <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
                    <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /> 
                </a> 
     
                <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
                    <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
                </a>
    
    
<!--
                <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
                    <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
                </a>
    
    
                <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
                    <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
                </a>
    
                <a href="mailto:share@friendfeed.com" title="Share on FriendFeed"> 
                    <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" /> 
                </a>
    
                <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
                    <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" /> 
                </a>
-->
            </div>
    </div>
    <!-- /Social networking buttons -->

    <div id="breadcrumb">
        <a href="../index.html">RGraph: HTML5 canvas graph library</a>
        >
        <a href="./index.html">Documentation</a>
        >
        Combining charts
    </div>

    <h1>RGraph: HTML5 canvas graph library - Combining charts</h1>

    <script>
        if (RGraph.isIE8()) {
            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
        }
    </script>

    <ul>
        <li><a href="#barandline">Combining bar and line charts</a></li>
        <li><a href="#combiningline">Combining Line charts</a></li>
    </ul>
    
    <a name="barandline"></a>
    <h4>Combining bar and line charts</h4>

    <canvas id="myCanvas" width="600" height="250" style="float: right; border: 1px dashed gray">[No canvas support]</canvas>

    <script>
        var bar = new RGraph.Bar('myCanvas', [4,5,3,4,1,2,6,5,8,4,9,4]);
        //bar.Set('chart.gutter', 35);
        bar.Set('chart.title', 'A bar/line/pie combination (tooltips)');
        bar.Set('chart.ymax', 15);
        bar.Set('chart.text.angle', 45);
        bar.Set('chart.colors', ['#ccc']);
        bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        bar.Set('chart.background.grid.autofit', true);

        // Define the line first so that it can be added to the bar chart
        var line = new RGraph.Line('myCanvas', [1,3,4,3,2,1,4,5,2,3,8,8], [5,6,7,9,7,5,6,3,5,2,5,1]);
        line.Set('chart.linewidth', 2);
        line.Set('chart.colors', ['red', 'green', '#ccc']);
        line.Set('chart.key', ['Jane', 'Fred', 'John']);
        line.Set('chart.key.shadow', true);
        line.Set('chart.key.shadow.offsetx', 0);
        line.Set('chart.key.shadow.offsety', 0);
        line.Set('chart.key.shadow.blur', 10);
        line.Set('chart.key.shadow.color', 'rgba(128,128,128,0.5)');
        line.Set('chart.key.background', 'white');            
        line.Set('chart.key.rounded', true);
        line.Set('chart.tickmarks', 'circle');
        
        // This would all be done programmatically normally, and linked to the key, so that if you change a name in the key,
        // it changes in all of the tooltips too
        line.Set('chart.tooltips', [
                                    '<b>January</b><br />   <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'January\')"></canvas>   <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 4',
                                    '<b>February</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'February\')"></canvas>  <div id="red"></div>Jane: 6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 5',
                                    '<b>March</b><br />     <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'March\')"></canvas>     <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 3',
                                    '<b>April</b><br />     <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'April\')"></canvas>     <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>John: 4',
                                    '<b>May</b><br />       <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'May\')"></canvas>       <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 1',
                                    '<b>June</b><br />      <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'June\')"></canvas>      <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 2',
                                    '<b>July</b><br />      <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'July\')"></canvas>      <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 6',
                                    '<b>Aug</b><br />       <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'August\')"></canvas>    <div id="red"></div>Jane: 5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>John: 5',
                                    '<b>September</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'September\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 8',
                                    '<b>October</b><br />   <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'October\')"></canvas>   <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>John: 4',
                                    '<b>November</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'November\')"></canvas>  <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 9',
                                    '<b>December</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'December\')"></canvas>  <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>John: 4',

                                    '<b>January</b><br />   <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'January\')"></canvas>   <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 4',
                                    '<b>February</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'February\')"></canvas>  <div id="red"></div>Jane: 6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 5',
                                    '<b>March</b><br />     <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'March\')"></canvas>     <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 3',
                                    '<b>April</b><br />     <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'April\')"></canvas>     <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>John: 4',
                                    '<b>May</b><br />       <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'May\')"></canvas>       <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 1',
                                    '<b>June</b><br />      <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'June\')"></canvas>      <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 2',
                                    '<b>July</b><br />      <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'July\')"></canvas>      <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 6',
                                    '<b>August</b><br />    <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'August\')"></canvas>    <div id="red"></div>Jane: 5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>John: 5',
                                    '<b>September</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'September\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 8',
                                    '<b>October</b><br />   <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'October\')"></canvas>   <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>John: 4',
                                    '<b>November</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'November\')"></canvas>  <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 9',
                                    '<b>December</b><br />  <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'December\')"></canvas>  <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>John: 4'
                                   ]);
        line.Set('chart.tooltips.highlight', false);
        // No need to call Draw() - the bar chart will do it

        // Add a Line chart tooltip event that draws the tooltip Pie charts
        RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);
        
        
        
        // Add the line graph to the bar chart
        bar.Set('chart.line', line);
        
        // Draw the bar chart, which in turn draws the line graph for us
        bar.Draw();
            
        /**
        * This is the function that creates the tooltip graphs
        */
        function CreateTooltipGraph (obj)
        {
            var index  = RGraph.Registry.Get('chart.tooltip').__index__;
            var tooltip = obj.Get('chart.tooltips')[index];
            
            // Extract the data for the obj.Get('chart.tooltips')[index]ie chart froim the tooltip
            var jane_data = Number(tooltip.replace(/.*Jane: (\d+).*/, '$1'));
            var fred_data = Number(tooltip.replace(/.*Fred: (\d+).*/, '$1'));
            var john_data = Number(tooltip.replace(/.*John: (\d+).*/, '$1'));
            
            var pie_data    = [jane_data,fred_data,john_data];

            // This data could be dynamic
            var pie  = new RGraph.Pie('__tooltip_canvas__', pie_data);
            pie.Set('chart.gutter', 5);
            pie.Set('chart.colors', ['red','green','#ccc']);
            pie.Set('chart.strokestyle', '#ffd');
            pie.Set('chart.linewidth', 2);
            pie.Draw();
            
            pie.canvas.style.cursor = 'pointer';
        }
    </script>

    <p>
        This is an example of combining Bar and Line charts. It's quite straight-forward, and the code here shows you how it can be achieved.
    </p>
    
    <p>
        If the values for the line and bar result in different Y scales you may need to specify the <i>chart.ymax</i> property for each graph
        so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels.
    </p>
    
    <b>Tooltips</b>
    
    <p>
        You can have tooltips on the Line chart by setting <i>chart.tooltips.highlighting</i> to <i>false</i>, like below.
        The order in which you create the graphs is also important, you must define the Bar chart first, and subsequently the Line
        chart.
    </p>
    
    <pre class="code">line.Set('chart.tooltips.highlighting', false);</pre>
    
    <p>
        Because the tooltips are only triggered by the Line chart, you should put all of the information, for both the Line and the
        Bar chart, in the tooltips.
    </p>

    <a name="combiningline"></a>
    <h4>Combining Line charts</h4>

    <!-- This is the canvas that both the line graphs use -->
    <canvas id="myCanvas2" width="600" height="250" style="float: right">[No canvas support]</canvas>
    <script>
        line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
        line2.Set('chart.hmargin', 10);
        line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
        line2.Set('chart.linewidth', 3);
        line2.Set('chart.shadow', true);
        line2.Set('chart.shadow.offsetx', 2);
        line2.Set('chart.shadow.offsety', 2);
        line2.Set('chart.ymax', 65);
        line2.Set('chart.units.post', 'l');
        line2.Set('chart.gutter', 40);
        line2.Set('chart.noxaxis', true);
        line2.Set('chart.noendxtick', true);
        line2.Set('chart.title', 'An example of axes both sides');
        line2.Draw();

        line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
        line3.Set('chart.hmargin', 10);
        line3.Set('chart.linewidth', 3);
        line3.Set('chart.shadow', true);
        line3.Set('chart.shadow.offsetx', 2);
        line3.Set('chart.shadow.offsety', 2);
        line3.Set('chart.yaxispos', 'right');
        line3.Set('chart.noendxtick', true);
        line3.Set('chart.background.grid', false);
        line3.Set('chart.ymax', 100);
        line3.Set('chart.colors', ['blue', 'red']);
        line3.Set('chart.units.pre', '$');
        line3.Set('chart.gutter', 40);
        line3.Set('chart.key', ['Cost', 'Volume']);
        line3.Set('chart.key.background', 'rgba(255,255,255,0.8)');
        line3.Draw();
    </script>

    <p>
        Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the right. You should
        be careful with this chart type as it can easily lead to confusion.
    </p>
    
    <p>
        This chart is made up from two line charts, one with the Y axis on the left and one on the right. The code that makes up
        this chart is below.
    </p>
    
    <p>
         The only reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines,
         you can do this without combining any charts. <a href="../examples/line.html">See the line chart example page</a>
    </p>

    <br clear="all" />

    <pre class="code">
&lt;script&gt;
    window.onload = function
    {
        line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
        line2.Set('chart.hmargin', 10);
        line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
        line2.Set('chart.linewidth', 3);
        line2.Set('chart.shadow', true);
        line2.Set('chart.shadow.offsetx', 2);
        line2.Set('chart.shadow.offsety', 2);
        line2.Set('chart.ymax', 65);
        line2.Set('chart.units.post', 'l');
        line2.Set('chart.gutter', 35);
        line2.Set('chart.noxaxis', true);
        line2.Set('chart.noendxtick', true);
        line2.Set('chart.title', 'An example of axes both sides');
        line2.Draw();

        line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
        line3.Set('chart.hmargin', 10);
        line3.Set('chart.linewidth', 3);
        line3.Set('chart.shadow', true);
        line3.Set('chart.shadow.offsetx', 2);
        line3.Set('chart.shadow.offsety', 2);
        line3.Set('chart.yaxispos', 'right');
        line3.Set('chart.noendxtick', true);
        line3.Set('chart.background.grid', false);
        line3.Set('chart.ymax', 65);
        line3.Set('chart.colors', ['blue', 'red']);
        line3.Set('chart.units.pre', '$');
        line3.Set('chart.gutter', 35);
        line3.Set('chart.key', ['Cost', 'Volume']);
        line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
        line3.Draw();
    }
&lt;/script&gt;
</pre>


</body>
</html>